<!-- 第二十六章测试 -->
<template>
    <div v-if='propData.modelValue' class="dialog">
        <div class="dialog-header">
            <div>标题-->{{ propData.title }}</div>
            <div>自定义-->{{ propData.modelModifiers?.tangshao }}</div>
            <div @click="close">x</div>
        </div>
        <div class="dialog-content">
            内容
        </div>
    </div>
</template>
 
<script setup lang='ts'>

type Props = {
    modelValue: boolean,
    title: string,
    modelModifiers?: {
        tangshao: boolean
    }
}
const propData = defineProps<Props>()

const emit = defineEmits(['update:modelValue', 'update:title'])

const close = () => {

    if (propData.modelModifiers?.tangshao) {
        emit('update:title', '啥也不是')
    } else {
        emit('update:title', '没有加上')
    }
    emit('update:modelValue', false);
    
}

</script>
 
<style lang='less'>
.dialog {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    &-header {
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }

    &-content {
        padding: 10px;
    }
}
</style>